import React from 'react'
import { Form } from 'antd'

import { SchemaFormWrapper, Observer, SchemaType } from '@amazebird/schema-form'

const SchemaForm = SchemaFormWrapper(Form)

const Custom = () => {
  return <div>这是一个自定义组件</div>
}

const entity = {
  cardIndex: 1,
  object: {
    name: 2,
    subject: '数学',
    subject2: 'aaa',
    custom: [{
      test1: 'aaa',
      test2: 'bbb'
    }],
    objectArray: [{
      id: 1,
      name: '范小岳',
      nickName: '空虚公子',
      test: 'test',
      sex: 1
    }, {
      id: 2,
      name: '范小岳',
      nickName: '太阳神',
      test: 'test',
      sex: 1
    }]
  },
  'term': [1, 0]
}

const schema: SchemaType = {
  'test': {
    label: '调动测试',
    disabled: false,
    component: 'select',
    visible: Observer({
      watch: '*visible',
      action: (visible) => {
        console.error('test watch visible', visible)
        return visible
      }
    }),
    defaultValue: 1,
    options: [{ value: 1, label: '测试1' }, { value: 2, label: '测试2' }]
  },
  'cardIndex': {
    label: '选择卡片',
    component: 'select',
    defaultValue: 1,
    options: entity.object.objectArray.map((item, index) => ({ value: index, label: `卡片${index + 1}` })),
    props: {
      allowClear: true
    }
  },
  'object': {
    type: 'object',
    fields: {
      'custom': {
        label: '自定义组件',
        component: Custom
      },
      'subject': {
        name: '学科',
        component: 'input',
        transform: {
          input: (value) => value + '-太阳'
        },
        // rules: {
        //   required: true
        // },
        props: {
          style: { width: 200 }
        }
      },
      'subject2': {
        name: '学科2',
        // preserve: true,
        component: Observer({
          watch: '#mode',
          action: () => {
            return 'input'
          }
        }),
        transform: {
          input: () => '这是一个测试',
          output: () => 'test'
        },
        rules: Observer({
          watch: ['object.name', 'object.objectArray'],
          action: () => {
            return {
              required: false
            }
          }
        }),
        props: {
          style: { width: 200 }
        }
      },
      'name': {
        name: '用户名',
        component: Observer({
          watch: ['#mode', 'cardIndex'],
          action: (mode, cardIndex) => {
            if (mode === 'detail') return 'select'
            return cardIndex === 0 ? 'select' : 'select.Text'
          }
        }),
        options: [{ value: 1, label: '小太阳' }, { value: 2, label: '小月亮' }]
      },
      'date': {
        component: 'datePicker'
      },
      'score': {
        type: 'array',
        fields: {
          'subject': {
            name: '学科',
            component: 'input'
          },
          score: {
            name: '成绩'
          }
        }
      },
      'objectArray': {
        type: 'array',
        required: true,
        // primaryKey: 'id',
        visible: Observer({
          watch: '*visible',
          action: (visible) => {
            return visible
          }
        }),
        // props: {
        //   watch: 'cardIndex',
        //   action: (cardIndex) => {
        //     if (cardIndex !== undefined) {
        //       console.info('watch cardIndex', cardIndex)
        //       return {
        //         cardIndex
        //       }
        //     }
        //     return {}
        //   }
        // },
        fields: {
          'name': {
            label: <span>用户名</span>,
            name: '用户名',
            // preserve: false,
            visible: true,
            component: 'text',
            value: Observer({
              watch: '*userName',
              action: (userName, { value }) => {
                console.info('trigger:', userName)
                if (userName === 1) return '这是一个trigger测试'
                return value
              }
            }),
            props: {
              style: {
                width: 200
              }
            }
          },
          'nickName': {
            label: '真实姓名',
            // preserve: false,
            // rules: {
            //   required: true
            // },
            component: Observer({
              watch: ['*mode'],
              action: (mode, { $index }) => {
                if (mode === 'detail') return 'text'
                if ($index === 0) return 'text'
                return 'input'
              }
            }),
            props: {
              style: {
                width: 200
              }
            }
          },
          'sex': {
            label: '性别',
            // preserve: false,
            component: 'select',
            defaultValue: 0,
            options: [{ value: 1, label: '男' }, { value: 0, label: '女' }],
            transform: {
              output: false
            }
          }
        }
      }
    }
  },
  // 'term': {
  //   type: 'array',
  //   fields: {
  //     component: 'select',
  //     options: [{ value: 1, label: '天才' }, { value: 0, label: '笨蛋' }]
  //   }
  // }
}

function App() {
  return (
    <SchemaForm schema={schema} />
  )
}

export default App
